<template>
	<view class="navigation-container">
		<!-- 顶部导航栏 -->
		<view class="nav-header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<view class="back-arrow"></view>
				</view>
				<view class="nav-title">导航</view>
				<view class="nav-right">
					<view class="nav-icon-dot"></view>
					<view class="nav-icon-line"></view>
					<view class="nav-icon-circle"></view>
				</view>
			</view>
		</view>

		<!-- 地图区域 -->
		<view class="map-view">
			<view class="map-wrapper">
				<map 
					class="map"
					:latitude="mapCenter.latitude"
					:longitude="mapCenter.longitude"
					:markers="markers"
					:scale="15"
					show-location
				></map>
			</view>
		</view>

		<!-- 底部信息面板 -->
		<view class="info-panel">
			<view class="info-content">
				<text class="destination-name">{{ destinationName }}</text>
				<text class="destination-address">{{ destinationAddress }}</text>
			</view>
			<view class="navigate-btn" @click="startNavigation">
				<text class="navigate-btn-text">导航</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';

	// 目的地信息
	const destinationName = ref('车百事汽车生活馆');
	const destinationAddress = ref('山阳区人民路与解放路交叉口');
	
	// 地图中心点（目的地位置）
	const mapCenter = ref({
		latitude: 35.2236,
		longitude: 113.2925
	});

	// 当前用户位置（示例）
	const currentLocation = ref({
		latitude: 35.2156,
		longitude: 113.2845
	});

	// 地图标记点
	const markers = ref([]);

	// 页面加载
	onLoad((options) => {
		if (options.name) {
			destinationName.value = decodeURIComponent(options.name);
		}
		if (options.address) {
			destinationAddress.value = decodeURIComponent(options.address);
		}
		if (options.latitude) {
			mapCenter.value.latitude = parseFloat(options.latitude);
		}
		if (options.longitude) {
			mapCenter.value.longitude = parseFloat(options.longitude);
		}

		// 设置地图标记
		markers.value = [
			// 目的地标记（红色）
			{
				id: 1,
				latitude: mapCenter.value.latitude,
				longitude: mapCenter.value.longitude,
				iconPath: '/static/image/carmaintenance/位置 拷贝 8@3x.png',
				width: 40,
				height: 40,
				callout: {
					content: destinationName.value,
					display: 'ALWAYS',
					fontSize: 12,
					borderRadius: 5,
					padding: 5,
					color: '#333',
					bgColor: '#fff'
				}
			}
		];

		// 获取当前位置
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				currentLocation.value.latitude = res.latitude;
				currentLocation.value.longitude = res.longitude;
			}
		});
	});

	// 开始导航
	const startNavigation = () => {
		uni.openLocation({
			latitude: mapCenter.value.latitude,
			longitude: mapCenter.value.longitude,
			name: destinationName.value,
			address: destinationAddress.value
		});
	};

	// 返回
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style scoped>
	.navigation-container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f5f5f5;
		overflow: hidden;
	}

	/* 顶部导航栏 */
	.nav-header {
		background: linear-gradient(180deg, #2477F4 0%, #166BEC 100%);
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		flex-shrink: 0;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		padding-top: calc(20rpx + env(safe-area-inset-top));
	}

	.nav-left {
		width: 80rpx;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.back-arrow {
		width: 24rpx;
		height: 24rpx;
		border-left: 4rpx solid #fff;
		border-bottom: 4rpx solid #fff;
		transform: rotate(45deg);
		margin-left: 10rpx;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}

	.nav-right {
		width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8rpx;
	}

	.nav-icon-dot {
		width: 8rpx;
		height: 8rpx;
		background: #fff;
		border-radius: 50%;
	}

	.nav-icon-line {
		width: 2rpx;
		height: 24rpx;
		background: #fff;
		margin: 0 4rpx;
	}

	.nav-icon-circle {
		width: 24rpx;
		height: 24rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		position: relative;
	}

	.nav-icon-circle::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 8rpx;
		height: 8rpx;
		background: #fff;
		border-radius: 50%;
	}

	/* 地图区域 */
	.map-view {
		flex: 1;
		position: relative;
		overflow: hidden;
	}

	.map-wrapper {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	/* 底部信息面板 */
	.info-panel {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 30rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20rpx;
		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.info-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		min-width: 0;
	}

	.destination-name {
		font-size: 36rpx;
		font-weight: 700;
		color: #000;
		line-height: 1.2;
	}

	.destination-address {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	.navigate-btn {
		width: 160rpx;
		height: 88rpx;
		background: linear-gradient(135deg, #2477F4 0%, #166BEC 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		box-shadow: 0 4rpx 12rpx rgba(36, 119, 244, 0.25);
	}

	.navigate-btn-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
	}
</style>
